<template>
  <el-dialog
    v-model="dialogVisible"
    :destroy-on-close="true"
    :align-center="true"
    width="40%"
    :title="`${dialogData.title}消息明细表`"
  >
    <el-form
      ref="messageItemFormRef"
      :rules="rules"
      :disabled="dialogData.isView"
      :model="dialogData.itemInfo"
      label-width="100px"
      label-suffix=" :"
      :hide-required-asterisk="dialogData.isView"
    >
      <el-form-item label="标题">
        <el-input
          v-model="dialogData.itemInfo.title"
          placeholder="请填写标题"
          clearable
          maxlength="100"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="消息内容" maxlength="300" show-word-limit>
        <el-input
          v-model="dialogData.itemInfo.content"
          placeholder="请选择消息内容"
          type="textarea"
          :autosize="{ minRows: 10 }"
        />
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="发送人">
            <el-input v-model="dialogData.itemInfo.sendName" placeholder="请填写发送人" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间">
            <el-input v-model="dialogData.itemInfo.createDate" placeholder="请填写创建时间" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
      <!-- <el-button
        type="primary"
        v-show="!dialogData.isView"
        @click="handleSubmit"
        :loading="btnLoading"
        >确定</el-button
      > -->
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { FormInstance } from "element-plus";
import { getOptTitle, OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { MessageItemEntity } from "@/biz/interface/messageType";
import { getMessageItemInfoApi } from "@/api/modules/cpymsg/sys";
//页面的数据
interface MessageItemDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  //是否是查看状态，查看状态是不可以提交数据
  isView: boolean;
  //当前的数据对象
  itemInfo: MessageItemEntity;
  //其它的数据都继续在这里加
}

//弹出框的参数
const dialogVisible = ref(false);
//当前表单数据在这里初始化
const dialogData = reactive<MessageItemDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  isView: false,
  itemInfo: {
    title: "",
    content: "",
    createDate: "",
    sendName: "",
    resTypeName: ""
  }
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogParam): void => {
  dialogData.optType = params.optType;
  dialogData.rowData = params.rowData;
  dialogData.isView = dialogData.optType === OptEnum.VIEW;
  dialogData.title = getOptTitle(dialogData.optType);

  if (dialogData.optType === OptEnum.CREATE) {
    initItemInfo();
  } else if (dialogData.rowData && dialogData.rowData.id) {
    getItemInfo(dialogData.rowData.id);
  }

  dialogVisible.value = true;
};

//初始化页面的数据
const initItemInfo = (): void => {
  dialogData.itemInfo = {
    title: "",
    content: "",
    createDate: "",
    sendName: "",
    resTypeName: ""
  };
};
//获取当前数据的详情，直接调用接口获取数据
const getItemInfo = async (id: string) => {
  if (id) {
    let { data } = await getMessageItemInfoApi({ id });
    dialogData.itemInfo = data as unknown as MessageItemEntity;
    emits("refresh-list");
  }
};

//数据较验
const rules = reactive({});

// 提交数据（新增/编辑）
const messageItemFormRef = ref<FormInstance>();

//页面事件
const emits = defineEmits(["refresh-list"]);

//页面参数
defineExpose({
  acceptParams
});
</script>
